<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>天气</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			body{
				width: 90%;
				margin: auto;
			}
			.cl{
				width: 100%;
				padding: 20px;
				text-align: center;
				
			}
			#ipt{
					transition: .5s;
					outline: none;
					border: 1px solid #4169E1;
				    width: 280px;
				    padding-left: 10px;
				    height: 40px;
			}
			.co,#for>div{
				display: inline-block;
				background: #eee;
				padding: 20px;
				border-radius: 20px;
				width: 13%;
				margin: 7px;
			}
			.co > div,.cr > div{
				color: royalblue;
			}
			.co > div:nth-child(1){
				
			}
			.cr{
				width: 80%;
				display: inline-block;
				background: #eee;
				padding: 20px;
				border-radius: 20px;
			}
			.ar{
				font-size: 14px;
				color: royalblue;
			}
			.zx{
				margin-left: 20px;
				font-size: 24px;
				color: #666;
			}
		</style>
	</head>
	<body>
		<div class="cl"><input id="ipt" value="东光" placeholder="请选择您的城市" type="text" /></div>
		
		
		<!--<div class="co">-->
			<div class="zx">城市：<span id="city"></span></div>
			<!--<div class="">天气：<span id="now"></span></div>
			<div class="">风向：<span id="wind"></span></div>
			<div class="">空气质量：<span id="aqi"></span></div>
		</div>-->
		<!--<div class="cr">-->
			<!--<div class=""><span id="q1"></span></div>
			<div class=""><span id="q2"></span></div>
			<div class=""><span id="q3"></span></div>
			<div class=""><span id="q4"></span></div>-->
			<!--<div class=""><span id="q5"></span></div>
			<div class=""><span id="q6"></span></div>
			<div class=""><span id="q7"></span></div>
			<div class=""><span id="q8"></span></div>-->
		<!--</div>-->
		<div id="for"></div>
		<!--<iframe id="fancybox-frame" name="fancybox-frame1568859447851" frameborder="0" scrolling="no" hspace="0"  src="http://i.tianqi.com/index.php?c=code&a=getcode&id=34&h=25&w=280"></iframe>-->
		<script>
			var ca = document.querySelector("#ipt").value;
			function loadXMLDoc()
			{
				var xmlhttp;
				if (window.XMLHttpRequest)
				{
					//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
					xmlhttp=new XMLHttpRequest();
				}
				else
				{
					// IE6, IE5 浏览器执行代码
					xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
				}
				xmlhttp.onreadystatechange=function()
				{
					if (xmlhttp.readyState==4 && xmlhttp.status==200)
					{
						var json = xmlhttp.responseText;
						json = JSON.parse(json);
						console.log(json);
						document.querySelector("#city").innerHTML = json.basic.city;
//						document.querySelector("#now").innerHTML = json.now.cond.txt;
//						document.querySelector("#wind").innerHTML = json.now.wind.dir;
//						document.querySelector("#aqi").innerHTML= json.aqi.city.qlty;
//						document.querySelector("#q1").innerHTML= json.suggestion.air.txt;
//						document.querySelector("#q2").innerHTML= json.suggestion.comf.txt;
//						document.querySelector("#q3").innerHTML= json.suggestion.cw.txt;
//						document.querySelector("#q4").innerHTML= json.suggestion.drsg.txt;
						/*document.querySelector("#q5").innerHTML= json.suggestion.flu.txt;
						document.querySelector("#q6").innerHTML= json.suggestion.sport.txt;
						document.querySelector("#q7").innerHTML= json.suggestion.trav.txt;
						document.querySelector("#q8").innerHTML= json.suggestion.uv.txt;*/
						for(var i = 0;i<json.daily_forecast.length;i++){
							var ite = document.querySelector("#for");
							var itt = document.createElement("div");
							var p = document.createElement('p');
							p.innerHTML = json.daily_forecast[i].date + "</br>天气：" + json.daily_forecast[i].cond.txt_d + "</br>风向: " + json.daily_forecast[i].wind.dir + "</br>温度: " + json.daily_forecast[i].tmp.max + "℃/" + json.daily_forecast[i].tmp.min + "℃";
							p.classList = "ar";
							
							
							
							
							
							
							
							itt.appendChild(p)
							ite.appendChild(itt);
						}
					}
				}
				
				xmlhttp.open("GET","https://bird.ioliu.cn/weather?city=" + ca,true);
				xmlhttp.send();
				ipt.value = "";
			}
			loadXMLDoc();
			document.querySelector("#ipt").addEventListener('change',function(){
				console.log(this.value);
				ca = this.value;
				loadXMLDoc();		
				document.querySelector("#for").innerHTML = "";
			})
			var cl = document.querySelector(".cl");
			ipt.addEventListener("focus",function(){
				ipt.style.width = "350px"
				ipt.style.borderRadius = "20px"
//				ipt.style.background = "rgb(242,242,242)"
			})
			ipt.addEventListener("blur",function(){
				ipt.style.width = "280px"
				ipt.style.borderRadius = "0px"
//				ipt.style.background = "#fff"
			})
		</script>
	</body>
</html>
